<template>
  <div class="q-pa-md">
    <t-card flat bordered style="max-width: 300px">
      <t-item>
        <t-item-section avatar>
          <t-skeleton type="QAvatar" animation="fade" />
        </t-item-section>

        <t-item-section>
          <t-item-label>
            <t-skeleton type="text" animation="fade" />
          </t-item-label>
          <t-item-label caption>
            <t-skeleton type="text" animation="fade" />
          </t-item-label>
        </t-item-section>
      </t-item>

      <t-skeleton height="200px" square animation="fade" />

      <t-card-section>
        <t-skeleton type="text" class="text-subtitle2" animation="fade" />
        <t-skeleton
          type="text"
          width="50%"
          class="text-subtitle2"
          animation="fade"
        />
      </t-card-section>
    </t-card>
  </div>
</template>
